@charset "UTF-8";
@import "variables";
@import "icons";
@import "../../../sass/reset";
@import "../../../sass/func";
@import "components";

// 变量
$pageHeight: 1206px;

// MIX
@mixin positioning($top) {
  position: absolute;
  top: percent($top);
  left: 50%;
  transform: translate(-50%, 0);
}

html,
body {
  position: relative;

  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;

  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

  -webkit-overflow-scrolling: touch !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  text-decoration: none;
}

button {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  font: none;
  -webkit-appearance: none;

}
input {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
}
.about {
  position: absolute;
  z-index: 99;
  top: pxToRem(64px);
  left: pxToRem(32px);

}
.rule {
  @extend .about;
  left: auto;
  right: pxToRem(50px);
}
.page {
  height: 100%;
  width: 100%;
  position: relative;
  background: url("../images/bg_page.jpg") no-repeat center;
  background-size: 100% 100%;
  .title {
    @include positioning(46);
    transform: translate(-50%, 0);
    background: url("../images/title.png") no-repeat center;
    background-size: contain;
    height: percent(263);
    width: pxToRem(451px);
  }
  // .main {
  //   @include positioning(360);
  //   background: url("../images/bg_main.png") no-repeat center;
  //   background-size: contain;
  //   width: pxToRem(660px);
  //   height: percent(658);
  // }
  .board {
    @include positioning(314);
    background: url("../images/bg_main1.png") no-repeat center;
    background-size: contain;
    width: pxToRem(660px);
    height: percent(508);
  }
  .info {
    position: absolute;
    left:50%;
    transform: translate(-49.5%, 0);
    top: percent(810);
    width: pxToRem(652px);
    height: percent(164);
    color: #ae5da1;
    font-size: pxToRem(26px);
    padding: 0 pxToRem(46px) pxToRem(10px) pxToRem(150px);
    box-sizing: border-box;

    background: url("../images/bg_main2.png") no-repeat center;
    background-size: contain;

    display: flex;
    align-items:center;
    line-height: pxToRem(36px);
    font {
      font-weight: bold;
    }
  }
  .avatar {
    position: absolute;
    left: pxToRem(50px);
    top: 50%;
    transform: translate(0, -58%);
    width: pxToRem(82px);
    height: pxToRem(82px);
    border-radius: pxToRem(41px);
    overflow: hidden;
    border: pxToRem(4px) solid #fff;
    background-color: #fff;
    box-sizing: border-box;
    // box-shadow: 2px 2px pxToRem(10px) rgba(0, 0, 0, .59);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .btn-like {
    position: absolute;
    bottom: percent(100);
    right: pxToRem(36px);
    // left: 50%;
    // transform: translate(-50%, 0);
    &.unabled {
      filter: grayscale(1);
    }
  }
  .btn-collect {
    position: absolute;
    bottom: percent(100);
    left: pxToRem(30px);
    // left: 50%;
    // transform: translate(-50%, 0);
    &.unabled {
      filter: grayscale(1);
    }
  }
}

.page-txt {
  background: url("../images/bg_txt.jpg") no-repeat center !important;
  background-size: 100% 100% !important;
  .content {
    // width: pxToRem(680px);
    // height: percent(1002);
    position: absolute;
    top: pxToRem(30px);
    left: pxToRem(35px);
    right: pxToRem(35px);
    bottom: pxToRem(175px);
    overflow-y: scroll;
    color: #fff;
    padding: pxToRem(33px);
    box-sizing: border-box;
    border: pxToRem(3px) solid #fff;
    border-radius: pxToRem(10px);
    background-color: #4b0094;
    box-shadow: pxToRem(18px) pxToRem(18px) pxToRem(21px) rgba(62, 0, 123, .38);
  }
  p {
    font-size: pxToRem(28px);
    line-height: pxToRem(42px);
  }
  .title-txt {
    font-size: pxToRem(36px);
    padding-bottom: pxToRem(30px);
  }
  .center {
    text-align: center;
  }
  .bold {
    font-weight: bold;
  }
  .indent {
    text-indent: 2em;
  }
  .p30 {
    padding-bottom: pxToRem(30px);
  }
  .icon-logo {
    bottom: pxToRem(65px);
    height: pxToRem(56px);
  }
}

.page-registration {
  background: url("../images/bg_registration.jpg") no-repeat center !important;
  background-size: 100% 100% !important;
  .content {
    padding: pxToRem(120px) pxToRem(72px) 0;
    p {
      color: #fff;
      font-size: pxToRem(32px);
      text-align: center;
    }
    .form {
      padding: pxToRem(40px) 0 pxToRem(78px);
      margin: 0 auto;
      width: pxToRem(640px);
      text-align: center;
      .btn {
        color: #fff;
        width: pxToRem(220px);
        height: pxToRem(80px);
        border-radius: pxToRem(80px);
        background-color: rgba(255, 255, 255, .3);
        margin-top: pxToRem(30px);
        font-size: pxToRem(34px);
      }
    }
    .input-wrapper {
      width: 100%;
      height: pxToRem(80px);
      background-color: rgba(255, 255, 255, .3);
      border-radius: pxToRem(80px);
      margin-bottom: pxToRem(20px);
      padding: 0 pxToRem(40px);
      box-sizing: border-box;
      input {
        width: 100%;
        height: 100%;
        // padding: pxToRem(25px) pxToRem(40px);
        line-height: pxToRem(80px);
        color: #fff;
        font-size: pxToRem(32px);
        box-sizing: border-box;
        &::-webkit-input-placeholder {
          font-size: pxToRem(32px);
          color: rgba(255, 255, 255, .5);
        }
      }
    }
  }
  .tips {
    font-size: pxToRem(26px);
    color: #e5d19a;
    line-height: pxToRem(40px);
  }
  .icon-logo {
    bottom: pxToRem(88px);
  }
}

.btn-small {
  background: linear-gradient(123deg, #fbc128, #f8a13e);
  color: #fff;
  padding: pxToRem(8px) pxToRem(12px);
  border-radius: pxToRem(14px);
  font-size: pxToRem(26px);
  box-shadow: pxToRem(12px) pxToRem(12px) pxToRem(18px) rgba(50, 0, 104, .65);
}

.btn-like {
  background: url("../images/btn_like.png") no-repeat center;
  background-size: contain;
  width: pxToRem(375px);
  height: percent(157);
}
.btn-collect {
  background: url("../images/btn_collect.png") no-repeat center;
  background-size: contain;
  width: pxToRem(334px);
  height: percent(157);
}
.icon-logo {
  position: absolute;
  bottom: percent(30);
  left: 50%;
  transform: translate(-50%, 0);
  background: url("../images/logo.png") no-repeat center;
  background-size: contain;
  width: pxToRem(156px);
  height: percent(56);
}